<template>
	<view class="content">
		<u-toast ref="uToast"></u-toast>
		<u-modal ref="uModal" v-model="delShow" :show-cancel-button="true" :show-title="delShowTitle"
			@confirm="deleteChatRecord" :content="delContent">
		</u-modal>
		<u-modal ref="uModal2" v-model="ucenterShow" :show-cancel-button="true" :show-title="true" @confirm="toUCenter"
			:content="ucenterContent" z-index="20000">
		</u-modal>
		<view>
			<u-popup v-model="showSendBox" mode="bottom" :closeable="true" @close="closeInput">
				<view class="p-send-box">
					<view class="p-send-top">提示：点击发布人头像可以查看联系方式</view>
					<view style="margin-top: 20px;">
						<view style="display: flex;padding: 10px;" @click="openArea">
							<view style="margin-right: 10px;margin-left: 2px;">甩单到:</view>
							<view style="color: #848484;">
								<view style="width: 50px;">{{ areaName }}</view>
							</view>
							<view>
								<image :src="xialaImg.src" class="p-send-img"></image>
							</view>
						</view>
						<view style="padding: 0px 10px 0 10px">
							<textarea ref="myTxt" class="txt-box" placeholder="注意⚠️甩单请写具体城市!" maxlength="-1"
								v-model="txtContent" @input="onInput"></textarea>
						</view>
						<view style="margin-left:10px;margin-top: 20px;display: flex;">
							<view>
								<u-upload ref="uUpload" :file-list="imgFileList" @delete="deletePic" name="1"
									multiple="true" max-count="3" show-progress="true" :auto-upload="false"
									:limitType="limitType" @on-list-change="onListChange"></u-upload>
							</view>
							<view style="margin-left: 10px;height: 20px;margin-top: 60px;color: #848484;">
								<text>{{imgNum}}/3</text>
							</view>
						</view>
					</view>
					<view style="margin-top: 30px;width: 90%;margin-left: 5%;">
						<u-button @click="sendMsg()" :custom-style="customStyle" shape="circle"
							type="success">发送</u-button>
					</view>
					<view style="padding: 20px 0;display: flex;justify-content: center;align-items: center;">本账号还可以发布
						<view style="margin-left: 3px;margin-right: 3px; color: orangered;">{{userInfo.userUseNumber}}
						</view>条信息
						<view style="margin-left: 10px;"><u-button :custom-style="customStyle" size="mini"
								shape="circle" type="success" @click="toPay(1)">去增加</u-button></view>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-popup v-model="areaShow" mode="bottom" :closeable="true" @close="closeArea" z-index="20000">
				<view style="p-content">
					<view class="p-top">选择甩单总群</view>
					<view class="p-search">
						<u-search placeholder="输入内容搜索" bg-color="#ededed" @change="change" @search="search"
							v-model="keyword" :show-action="false" clearable></u-search>
					</view>
					<view style="height: 50vh;margin-top: 20rpx;">
						<u-cell-group>
							<u-cell-item v-for="(item, index) in areaIndexList" :arrow="false" :title="item.areaName"
								:key="index" @click="chooseArea(item)">
							</u-cell-item>
						</u-cell-group>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-popup v-model="showUser" mode="bottom" :closeable="true" @close="closeUserInfo()">
				<view style="padding: 20px 20px 10px 20px;margin-top: 15px;">
					<view style="display: flex;">
						<view>
							<image style="height:40px; width: 40px;" src="/static/imgs/weixin.png"></image>
						</view>
						<view style="color: #ababab;font-size: 16px;line-height: 40px;margin-left: 8px;">{{wxAccount}}
						</view>
					</view>
					<view style="display: flex;margin-top: 10px;">
						<view>
							<image style="height:40px; width: 40px;" src="/static/imgs/phone.png"></image>
						</view>
						<view style="color: #ababab;font-size: 16px;line-height: 40px;margin-left: 8px;">{{phonenumber}}
						</view>
					</view>
				</view>
				<view style="padding-bottom:20px;display: flex;justify-content: center;align-items: center;">当前查看有效期还剩
					<view style="margin-left: 3px;margin-right: 3px; color: orangered;">
						{{userInfo.userExpireDateNumber}}
					</view>天
					<view style="margin-left: 10px;"><u-button :custom-style="customStyle" size="mini" shape="circle"
							type="success" @click="toPay(2)">去增加</u-button></view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-popup v-model="areaShowTop" mode="bottom" :closeable="true" @close="closeAreaTop">
				<view style="p-content">
					<view class="p-top">选择甩单总群</view>
					<view class="p-search">
						<u-search placeholder="输入内容搜索" bg-color="#ededed" @change="changeTop" @search="searchTop"
							v-model="keywordTop" :show-action="false" clearable></u-search>
					</view>
					<view style="height: 50vh;margin-top: 20rpx;">
						<u-cell-group>
							<u-cell-item v-for="(item, index) in topAreaIndexList" :arrow="false" :title="item.areaName"
								:key="index" @click="chooseAreaTop(item)">
							</u-cell-item>
						</u-cell-group>
					</view>
				</view>
			</u-popup>
		</view>
		<view>
			<u-modal v-model="allShow" :content="content" @confirm="toPeople"></u-modal>
		</view>
		<view class="t-head">
			<view @click="openAreaTop" style="display: flex;">
				<view>财税-{{topAreaNameCut}}甩单-总群</view>
				<!-- 				<view>
					<image :src="xialaImg.src" class="t-h-img"></image>
				</view> -->
				<u-icon name="arrow-down" style="margin-left: 5px;margin-top: 2px;"></u-icon>
			</view>
			<view class="t-h-img-s" @click="toSearch">
				<image style="width: 40rpx;height: 40rpx;" :src="searImg.src"></image>
			</view>
			<view class="t-h-img-q" @click="toPeople">
				<image style="width: 50rpx;height: 50rpx;" :src="qunliaoImg.src"></image>
			</view>
		</view>
		<scroll-view style="height: calc(100vh - 30px);;background-color: #ededed;" :scroll-top="scrollTop"
			class="scroll-Y" ref="sro" id="sro" @scrolltoupper="getList(true)" scroll-y="true"
			:scroll-with-animation="false">
			<view class="r-content">
				<view v-for="(item, index) in recodeList" :key="index">
					<view v-if="item.type == 0">
						<view class="chat-notice" v-if="$isNotNull(item.time)">
							<span>{{ item.time }}</span>
						</view>
					</view>

					<view v-if="item.type == 1">
						<view class="left-chat">
							<view class="avatar" @click="showUserInfo(item)">
								<image :src="item.headUrl" />
							</view>
							<view class="bubble">
								<text selectable="true">{{ item.msg }}</text>
								<view class="bubble-img-wrap">
									<view class="bubble-img" v-for="(imgUrl, index1) in item.imgList"
										@click="showImg(imgUrl, item.imgList)" :key="index1">
										<image :src="imgUrl" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="chat-notice-left" v-if="$isNotNull(item.time)">
							<span>{{ item.time }}</span>
						</view>
					</view>

					<view v-if="item.type == 2">
						<view class="right-chat">
							<view class="bubble">
								<text selectable="true">{{ item.msg }}</text>
								<view class="bubble-img-wrap">
									<view class="bubble-img" v-for="(imgUrl, index1) in item.imgList"
										@click="showImg(imgUrl, item.imgList)" :key="index1">
										<image :src="imgUrl" mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<view class="avatar" @click="showUserInfo(item)">
								<image :src="item.headUrl" />
							</view>
						</view>
						<view class="chat-notice-right" v-if="$isNotNull(item.time)">
							<view style="margin-top: 5px;margin-right: 5px;color: #009688;"
								@click="chooseDeleteChatRecord(item.id,index)">
								删除</view>
							<span>{{ item.time }}</span>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
		<view class="r-input" @click="openInput">
			<view style="width: 100%;">
				<view style="color: #606266;background-color: #f2f2f2;padding: 8px 10px;border-radius: 20px;">
					<u-icon name="edit-pen" style="margin-right: 3px;"></u-icon>
					请输入你的甩单信息
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfo
	} from 'os';
	import {
		getChatRecord,
		deleteChatRecord
	} from '../../apis/chat';
	import {
		data
	} from '../../uview-ui/libs/mixin/mixin';
	import {
		loginApis,
		getHost,
		fileApis,
		crypto,
		chatApis
	} from '@/apis/index'
	export default {
		created() {
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			});

			// uni.pageScrollTo({
			// 	duration: 300,
			// 	selector: '#sro'
			// });
			//#endif
		},
		onLoad(object) {
			var that = this;

			uni.$on('userInfoUpdated', (flag) => {

				that.getWxUserInfo()
			});

			//先保存
			if (object.userId) {
				that.shareUserId = object.userId;
			}

			let token = uni.getStorageSync('userToken');

			uni.login({
				provider: 'weixin',
				success(res) {
					that.code = res.code;

					let data = {
						code: that.code,
						shareUserId: that.shareUserId,
						token: token,
						type: object.type
					}


					loginApis.login(data).then((res) => {
							if (res.data.code != 0) {
								uni.showToast({
									icon: 'none',
									title: '数据加载失败！'
								})

								return
							}

							let userInfo = res.data.data.userInfo;

							that.userInfo = userInfo;

							let userToken = res.data.data.userToken;
							let headUrlList = res.data.data.headUrlList;

							that.allIndexList = res.data.data.areaList;
							that.indexList = res.data.data.areaList;

							that.topAreaIndexList = res.data.data.areaList;
							that.topIndexList = res.data.data.areaList;

							//默认选择全国群
							that.topAreaName = that.topAreaIndexList[0].areaName
							that.topAreaId = that.topAreaIndexList[0].id

							that.cutAreaName()

							that.recodeList = res.data.data.recodeList

							//滚到最底部
							that.scrollToBottom()

							//设置用户
							that.$store.dispatch('setUserName', userInfo.userName);
							that.$store.dispatch('setUserId', userInfo.userId);
							that.$store.dispatch('setAvatar', getHost() + userInfo.avatar);
							that.$store.dispatch('setSex', userInfo.sex);

							that.$store.dispatch('setPhonenumber', userInfo.phonenumber);

							that.$store.dispatch('setAreaId', userInfo.areaId);
							that.$store.dispatch('setAreaName', userInfo.areaName);

							that.$store.dispatch('setAmount', userInfo.amountStr);
							that.$store.dispatch('setWxAccount', userInfo.wxAccount);

							that.$store.dispatch('setUserExpireDateNumber', userInfo.userExpireDateNumber);
							that.$store.dispatch('setUserUseNumber', userInfo.userUseNumber);

							if (userInfo.areaId == null || userInfo.areaId == '') {
								that.allShow = true
								that.peolpeAreaShow = 1
							}

							//保存token
							uni.setStorageSync('userToken', userToken);

							// 保存区域信息
							uni.setStorageSync('areaAllList', that.allIndexList);

							that.areaList = that.allIndexList.filter((item, i) => i !== 0)
							that.areaIndexList = that.areaList

							//移除全国群
							uni.setStorageSync('areaList', that.allIndexList.filter((item, i) => i !== 0));

							//头像列表
							uni.setStorageSync('headUrlList', headUrlList);
						},
						(err) => {
							uni.showToast({
								icon: 'none',
								title: '数据加载失败！'
							})
						}
					)
				}
			});
		},
		data() {
			return {
				shareUserId: '',
				ucenterShow: false,
				ucenterContent: '请先完善个人信息',
				delId: '',
				delIndex: '',
				delShow: false,
				delShowTitle: true,
				delContent: '是否要删除该记录?',
				userInfo: {},
				isTopChange: false,
				keywordTop: '',
				areaShowTop: false,
				scrollTop: 0,
				pageNo: 1,
				pageSize: 10,
				topAreaName: '',
				topAreaNameCut: '',
				topAreaId: '',
				areaName: '请选择',
				areaId: '',
				limitType: ['png', 'jpg'],
				imgNum: 0,
				content: '请选择甩单的区域',
				allShow: false,
				keyword: "",
				txtContent: "",
				showSendBox: false,
				chooseIndex: -1,
				cellColor: '#cccccc',
				allIndexList: [],
				indexList: [],
				areaIndexList: [],
				topIndexList: [],
				topAreaIndexList: [],
				areaList: [],
				imgFileList: [],
				customStyle: {
					backgroundColor: '#009688'
				},
				myStyle: {
					backgroundColor: '#c8e6c9',
				},
				areaShow: false,
				peolpeAreaShow: 2,
				xialaImg: {
					src: '../../static/imgs/xiala.png'
				},
				searImg: {
					src: '../../static/imgs/search.png'
				},
				qunliaoImg: {
					src: '../../static/imgs/qunliao.png'
				},
				isRefresh: true,
				chazhi: 0,
				chatName: "测试聊天",
				recodeList: [],
				areaNameAlert: {
					type: 'warning',
					title: "请选择甩单区域!",
					duration: 2000,
				},
				txtContentAlert: {
					type: 'warning',
					title: "请输入甩单内容!",
					duration: 2000,
				},
				numberAlert: {
					type: 'warning',
					title: "发送条数不足，请及时充值！",
					duration: 2000,
				},
				inputValue: "xxx",
				prevent: false,
				showUser: false,
				phonenumber: '',
				wxAccount: ''
			}
		},
		methods: {
			getWxUserInfo() {
				var _that = this;
				_that.userInfo = _that.$store.state.wxUser;
			},

			showUserInfo(item) {
				this.showUser = true
				this.phonenumber = item.phonenumber
				this.wxAccount = item.wxAccount
			},

			//渲染滚动条在最底部
			scrollToBottom() {
				console.log("我滚啦.....！！！")
				var _this = this
				_this.$nextTick(() => {
					uni.createSelectorQuery().in(_this).select("#sro").boundingClientRect(rect => {
						// console.log("height", rect.height)
						_this.scrollTop = rect.height * 10;

						//滚到底修改阻止
						_this.prevent = false
					}).exec()
				});

			},

			//滚动时触发事件
			// scroll: function(e) {
			// 	// console.log(e.detail.scrollTop);
			// 	// this.scrollTop = e.detail.scrollTop;
			// },

			cutAreaName() {
				let value = this.topAreaName.substr(0, this.topAreaName.length - 1)
				this.topAreaNameCut = value
			},

			getList(add) {
				var that = this
				console.log("that.prevent:" + that.prevent)
				console.log("that.isTopChange:" + that.isTopChange)
				console.log("add:" + add)
				//拦截改变后第一次进来
				if (that.prevent && !that.isTopChange) {
					console.log("拦截改变后第一次进来")
					//拦截结束，后释放开关
					that.prevent = false

					return
				}


				let jisuanHeight = 500
				if (add) {
					console.log("顶部触发的111111111")
					that.pageNo++;
					jisuanHeight = that.pageNo * jisuanHeight
				}

				let areaId = ''

				if (that.topAreaName != '全国群') {
					areaId = that.topAreaId
				}

				if (that.isTopChange) {
					console.log("改变属性参数")
					//改变就需要重置页码
					that.pageNo = 1

					//拉到底部
					jisuanHeight = 6000

					//刷新值
					that.isTopChange = false

					//改变后第一次进来，肯定会促发上拉刷新，需要阻止进来
					//设置 阻止开关
					that.prevent = true
				}

				let data = {
					pageSize: that.pageSize,
					pageNo: that.pageNo,
					areaId: areaId
				}

				getChatRecord(data).then((res) => {
					console.log("获取列表记录成功！！！！！！！！！！！！！")

					var list = res.data.data
					var oldList = that.recodeList
					if (list.length != 0) {
						for (var i = 0; i < oldList.length; i++) {
							var data = oldList[i]
							list.push(data)
						}

						that.recodeList = list
						that.scrollTop = jisuanHeight

						console.log("that.scrollTop:" + that.scrollTop)
						that.scrollToBottom()
					}
				})
			},

			chooseDeleteChatRecord(id, index) {
				this.delId = id
				this.delIndex = index
				this.delShow = true
			},

			deleteChatRecord() {
				var _this = this
				let param = {
					chatId: _this.delId
				}

				deleteChatRecord(param).then((res) => {
					console.log("删除聊天记录成功！！！！！！！！！！！！！")
					console.log("delIndex:" + _this.delIndex)
					//删除本地聊天记录
					// let newArray = _this.recodeList.filter((_, i) => i == _this.delIndex);

					// //todo
					// _this.recodeList = newArray
					_this.recodeList = []
					_this.getList(false)
				})
			},

			showToast(params) {
				this.$refs.uToast.show(params)
			},

			search() {
				let _that = this
				_that.areaIndexList = _that.areaList.filter((item) => item.areaName.includes(_that.keyword))
			},
			change() {
				let _that = this
				_that.areaIndexList = _that.areaList.filter((item) => item.areaName.includes(_that.keyword))
			},

			searchTop() {
				let _that = this
				_that.topAreaIndexList = _that.topAreaList.filter((item) => item.areaName.includes(_that.keywordTop))
			},
			changeTop() {
				let _that = this
				_that.topAreaIndexList = _that.topAreaList.filter((item) => item.areaName.includes(_that.keywordTop))
			},

			toSearch() {
				uni.navigateTo({
					url: '../search/search'
				});
			},

			toUCenter() {
				uni.navigateTo({
					url: '/pages/ucenter/updateUser/updateUser'
				});
			},

			toPay(type) {
				uni.navigateTo({
					url: '../pay/pay/pay?type=' + type
				});
			},

			toPeople() {
				uni.navigateTo({
					// 1 打开 2 关闭
					url: '../people/people?peolpeAreaShow=' + this.peolpeAreaShow
				});
			},

			onInput(e) {
				let inputValue = e.detail.value;
				this.txtContent = inputValue
			},

			showImg(current, urls) {
				wx.previewImage({
					current: current,
					urls: urls,
				})
			},

			openArea() {
				this.areaShow = true;
			},

			closeArea() {
				this.areaShow = false;
			},

			openAreaTop() {
				this.areaShowTop = true;
			},

			closeAreaTop() {
				this.areaShowTop = false;
			},

			closeUserInfo() {
				this.showUser = false;
			},

			chooseArea(area) {
				let _this = this

				_this.areaName = area.areaName
				_this.areaId = area.id

				setTimeout(function() {
					_this.areaShow = false;
				}, 10)
			},

			chooseAreaTop(area) {
				let _this = this

				_this.isTopChange = _this.topAreaName != area.areaName
				_this.topAreaName = area.areaName
				_this.topAreaId = area.id

				_this.cutAreaName()

				console.log('_this.topAreaName:' + _this.topAreaName)

				setTimeout(function() {
					_this.areaShowTop = false;

					//更新面板聊天记录
					console.log('_this.isTopChange:' + _this.isTopChange)
					if (_this.isTopChange) {
						//清空聊天记录
						_this.recodeList = []

						_this.getList(false)
					}
				}, 10)
			},

			chooseAllArea(area, index) {
				let _this = this
				_this.chooseIndex = index;

				setTimeout(function() {
					_this.allShow = false;
				}, 10)

			},

			onShareAppMessage(res) {
				return {
					title: '企极立财税甩单圈,快来试试吧',
					// imageUrl: '../../static/imgs/pdf_zh.jpg',
					path: '/pages/index/index?userId=' + this.userInfo.userId
				}
			},

			copyUserInfo() {
				var _this = this
				// 使用uni.setClipboardData进行复制操作
				let textToCopy = _this.wxAccount + "," + _this.phonenumber
				uni.setClipboardData({
					data: textToCopy,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});

						_this.showUser = false
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			openInput() {
				this.$refs.uUpload.clear()
				this.showSendBox = true
			},

			closeInput() {
				this.showSendBox = false
				this.areaName = '请选择'
				this.txtContent = ''
			},

			onListChange(lists) {

				this.imgFileList = lists;
				this.imgNum = lists.length;
			},
			async sendMsg() {
				let _this = this

				if (_this.areaName == '' || _this.areaName == '请选择') {
					_this.showToast(_this.areaNameAlert)
					return
				}

				if (_this.txtContent == '') {
					_this.showToast(_this.txtContentAlert)
					return
				}

				//判断是否还有发送机会
				if (_this.userInfo.userUseNumber == '0') {
					_this.showToast(_this.numberAlert)
					return
				}

				console.log('userInfo:', _this.userInfo);

				if (!_this.$isNotNull(_this.userInfo.wxAccount) || !_this.$isNotNull(_this.userInfo.phonenumber)) {
					_this.ucenterShow = true

					return
				}

				const userToken = uni.getStorageSync('userToken')

				uni.showLoading({
					title: '发送中...',
					mask: true
				});

				let fileList = []
				for (var i = 0; i < _this.imgFileList.length; i++) {
					let path = _this.imgFileList[i].file.path

					await _this.getFileId(path).then((res) => {
						fileList.push(res.fileId)
					})

				}

				let reqInfo = {
					fileList: fileList,
					content: _this.txtContent,
					areaId: _this.areaId
				}

				uni.request({
					url: getHost() + '/wx/chat/sendChatInfo',
					data: reqInfo,
					method: 'POST',
					dataType: 'multipart/form-data',
					header: {
						'Authorization': userToken
					},
					success: (res) => {
						let data = JSON.parse(res.data)
						if (data.code == 0) {
							//刷新记录
							_this.prevent = true
							_this.isTopChange = true
							_this.topAreaName = _this.areaName
							_this.topAreaId = _this.areaId

							console.log("_this.topAreaName:" + _this.topAreaName)
							console.log("_this.topAreaId:" + _this.topAreaId)

							_this.cutAreaName()

							//关闭发送框
							_this.closeSend()

							//清空记录
							setTimeout(function() {
								//更新面板聊天记录
								console.log('_this.isTopChange:' + _this.isTopChange)
								//清空聊天记录
								_this.recodeList = []

								_this.getList(false)
							}, 10)
							//减少机会

							_this.userInfo.userUseNumber = Number(_this.userInfo.userUseNumber) - 1
							_this.$store.dispatch('setUserUseNumber', _this.userInfo.userUseNumber);

							//提示正在审核
							wx.showModal({
								title: '提示',
								content: '发送成功,消息正在审核,请耐心等待!',
								showCancel: false
							})

						} else {
							this.jumpIndex()
						}
					},
					fail() {
						this.jumpIndex()
					},
					complete() {
						uni.hideLoading();
					}
				});
			},

			closeSend() {
				//关闭发送框	
				var _this = this
				this.showSendBox = false
				this.areaId = ""
				this.txtContent = ""
				this.imgFileList = []
				this.areaName = '请选择'
			},

			jumpIndex() {
				uni.showToast({
					icon: 'none',
					title: '数据加载失败！'
				})

				//跳转到首页
				setTimeout(function() {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 3000)
			},

			getFileId(path) {
				return new Promise(function(resolve, reject) {
					const userToken = uni.getStorageSync('userToken')
					const requestUrl = getHost() + '/wx/uploadFile/uploadImg'
					let config = fileApis.uploadFile(requestUrl, userToken, path, false)
					config.then((res) => {
						resolve(res.data)
					})
				});
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.rich-box {
		font-size: 14px;
	}

	.chat-img-box {
		position: relative;
		left: 10px;
	}

	.chat-img {
		height: 80px;
		width: 80px;
		margin-top: 10px;
		margin-right: 8px;
		border-radius: 8px;
	}

	.chat-r-img-box {
		position: relative;
	}


	.txt-box {
		line-height: 40rpx;
		padding-top: 10rpx;
		padding-left: 2%;
		padding-right: 2%;
		font-size: 14px;
		// margin-left: 1%;
		width: 94%;
		background-color: #ededed;
		border-radius: 10rpx;
		height: 108px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
	}

	.p-selected {
		background-color: #c8e6c9;
	}

	.p-content {
		// height: 700px;
		// display: flex;
	}

	.p-send-top {
		margin-top: 22rpx;
		margin-left: 22rpx;
		font-size: 12px;
		line-height: 20px;
		color: #009688;
	}

	.p-top {
		margin-top: 22rpx;
		margin-left: 22rpx;
		font-size: 14px;
		line-height: 20px;
	}

	.p-search {
		padding: 20rpx;
		margin-top: 50rpx;
	}

	.t-head {
		position: fixed;
		top: 0;
		display: flex;
		font-size: 15px;
		font-weight: bold;
		padding: 10px 0 10px 0;
		background-color: white;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 40px;
		z-index: 1;
	}

	.t-h-img {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 5rpx;
		left: 5rpx;
	}

	.p-send-img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 3px;
		margin-top: 1px;
	}

	.t-h-img-s {
		position: absolute;
		top: 10px;
		right: 60px;
	}

	.t-h-img-q {
		position: absolute;
		top: 6px;
		right: 20px;
	}

	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		// height: 100vh;
		min-height: 100vh;
		// width: 100rpx;
		// border: 1px solid royalblue;
	}

	::-webkit-scrollbar {
		width: 8px;
	}

	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background: #ccccccb7;
	}

	.r-top {
		background-color: #f7f7f7f3;
	}

	.r-chat-name {
		font-size: 20px;
		height: 62px;
		line-height: 60px;
		margin-left: 30px;
	}

	.r-content {
		/**  聊天背景 **/
		background-color: #ededed;
		padding: 40px 0 50px 0;
		min-height: calc(100vh - 50px);
		// overflow-y: scroll;
		// border: 1px solid red;
	}

	.r-input {
		background-color: white;
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 50px;
		padding: 0 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.r-text {
		font-size: 80%;
		margin: 0 25px 0 25px;
	}

	.chat-shadw {
		box-shadow: 1px 3px 5px #888888;
		position: relative;
	}

	.chat-sender {
		clear: both;
		font-size: 80%;
	}

	.chat-sender view:nth-of-type(1) {
		float: left;
	}

	.chat-sender view:nth-of-type(2) {
		// margin: 0px 50px 2px 165px;
		padding: 0px;
		color: #848484;
		font-size: 80%;
		text-align: left;
	}

	.chat-sender view:nth-of-type(3) {
		//左边聊天框
		background-color: white;
		/*float: left;*/
		margin: 0px 0px 12px 50px;
		padding: 10px 10px 10px 10px;
		border-radius: 7px;
		text-indent: -12px;
	}

	.chat-receiver {
		clear: both;
		font-size: 80%;
	}

	.chat-receiver view:nth-of-type(1) {
		float: right;
	}

	.chat-receiver view:nth-of-type(2) {
		//右边聊天栏
		// margin: 0px 165px 2px 50px;
		padding: 0px;
		color: #848484;
		font-size: 80%;
		// text-align: right;
	}

	.chat-receiver view:nth-of-type(3) {
		/*float:right;*/
		//右边聊天框
		background-color: #b2e281;
		margin: 0px 50px 12px 0px;
		padding: 10px 10px 10px 10px;
		border-radius: 7px;
	}

	.chat-receiver view:first-child img,
	.chat-sender view:first-child img {
		//聊天头像
		width: 40px;
		height: 40px;
		border-radius: 15%;
	}



	.chat-notice {
		clear: both;
		font-size: 70%;
		color: white;
		text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
		cursor: default;
	}

	.chat-notice-right {
		clear: both;
		font-size: 70%;
		color: white;
		text-align: right;
		padding-right: calc(30rpx + 50px);
		padding-top: 15px;
		padding-bottom: 15px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.chat-notice-left {
		clear: both;
		font-size: 70%;
		color: white;
		text-align: left;
		padding-left: calc(30rpx + 50px);
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.chat-notice-left span {
		background-color: #cecece;
		line-height: 25px;
		border-radius: 5px;
		padding: 5px 10px;
	}

	.chat-notice-right span {
		background-color: #cecece;
		line-height: 25px;
		border-radius: 5px;
		padding: 5px 10px;
	}

	.chat-notice span {
		background-color: #cecece;
		line-height: 25px;
		border-radius: 5px;
		padding: 5px 10px;
	}



	/* 左聊天框 */
	.left-chat {
		display: flex;
		align-items: flex-start;
		margin-top: 20px;
		margin-left: 15px;
	}

	.left-chat .bubble {
		margin-left: 12px;
		padding: 10px;
		background-color: #ffffff;
		border-radius: 10px;
		box-shadow: 1px 3px 5px #888888;
		font-size: 14px;
		position: relative;
		max-width: calc(100% - 110px);
		/* 防止内容过宽 */
		word-break: break-word;
	}

	/* 左侧小三角 */
	.left-chat .bubble::before {
		content: "";
		position: absolute;
		left: -8px;
		/* 三角形距离气泡的偏移 */
		top: 14px;
		/* 距离顶部的高度，可微调 */
		width: 0;
		height: 0;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-right: 8px solid #ffffff;
		/* 颜色要和气泡背景一致 */
	}

	.avatar image {
		width: 40px;
		height: 40px;
		border-radius: 6px;
	}

	.bubble .bubble-img-wrap {
		display: flex;
		justify-content: flex-start;
		gap: 6px;
	}

	.bubble .bubble-img-wrap .bubble-img image {
		margin-top: 10px;
		width: 140rpx;
		height: 140rpx;
	}


	/* 右聊天框 */
	.right-chat {
		display: flex;
		align-items: flex-start;
		margin-top: 20px;
		margin-right: 15px;
		justify-content: flex-end;
	}

	.right-chat .bubble {
		margin-right: 12px;
		padding: 10px;
		background-color: #b2e281;
		border-radius: 10px;
		box-shadow: 1px 3px 5px #888888;
		font-size: 14px;
		position: relative;
		max-width: calc(100% - 110px);
		/* 防止内容过宽 */
		word-break: break-word;
	}

	/* 右侧小三角 */
	.right-chat .bubble::before {
		content: "";
		position: absolute;
		right: -8px;
		/* 三角形距离气泡的偏移 */
		top: 14px;
		/* 距离顶部的高度，可微调 */
		width: 0;
		height: 0;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-left: 8px solid #b2e281;
		/* 颜色要和气泡背景一致 */
	}




	.r-but {
		/* border: blue solid 1px; */
		text-align: right;
		margin: 12px 25px 0 25px;
	}

	.r-but button {
		border: none;
		line-height: 20px;
		height: 26px;
		width: 70px;
		margin-right: 20px;
		background-color: #e6e6e6;
		outline: none;
	}

	.r-but button:hover {
		background-color: #1a810db7;
		color: white;
	}

	.r-w {
		position: relative;
		right: 16px;
		top: -72px;
		display: block;
		float: right;
	}

	.r-warn {
		border: solid #888888 1px;
		width: 138px;
		border-radius: 7px;
		background-color: white;
		line-height: 26px;
		font-size: 15px;
		text-align: center;
	}

	.r-warn:after {
		content: "";
		position: absolute;
		top: 22px;
		width: 10px;
		left: 105px;
		height: 10px;
		border: 1px solid #888;
		transform: rotate(45deg);
		border-top: 0;
		border-left: 0;
		background: #fff;
	}

	.t-content {
		line-height: 46rpx;
		// padding-top: 20rpx;
		padding-left: 2%;
		padding-right: 2%;
		font-size: 28rpx;
		height: 20vh;
		width: 420rpx;
		// background-color: white;
		// border-radius: 10rpx;
		// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
	}
</style>